<template>
	<view>


		<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="10" closeable>

			<view class="flex-col section_6 show">
				<view class="flex-col justify-start items-end self-stretch relative group_8">
					<image class="image_12" src="/static/icon/loginbj.png" />
					<view class="flex-col items-start section_7 pos_2">
						<image class="image_11" src="/static/icon/loginleft.png" />
						<text class="text_8 mt-13-5">欢迎使用河马搬家</text>
						<text class="font_3 text_9 mt-13-5">全程含搬运，中途不加价</text>
					</view>
				</view>
				<view class="flex-row items-center self-stretch group_9">
					<view :class="grouptype?'group_10':'group_100'" @click="group()"></view>
					<view class="group_11 ml-6-5">
						<text class="font_5 text_10">我已经阅读并同意</text>
						<text class="font_6 text_11" @click="navgetse()">河马搬家用户协议</text>
						<text class="font_5 text_12">和</text>
						<text class="font_6" @click="navgetse()">隐私政策</text>
					</view>
				</view>

				<view class="flex-col justify-start items-center button text-wrapper" v-if="wxcode == ''"
					@click="login">
					<text class="font_2 text_13">授权登录</text>
				</view>


				<view class="flex-col justify-start items-center button text-wrapper" v-else>
					<button plain open-type="getPhoneNumber" class="login_button font_2 text_13"
						style="border: 1px ;padding: 4rpx;" @getphonenumber="getUserPhone">获取用户手机号</button>
				</view>

				<text class="self-center text_14" @click="other()">使用其他手机号登录</text>
				<view style="height:30rpx;"> </view>
			</view>
		</u-popup>

		<u-popup :show="shows" mode="bottom" @close="closes" @open="opens" :round="10" closeable>
			<view class="flex-col section_2 showss">
				<text class="self-center text" style="margin-top:50rpx;"> {{otherphoen?'手机号码登录':'请输入验证码'}} </text>
				<view class="flex-col self-stretch group">
					<text class="self-start text_2"> {{otherphoen?' ':'短信已发送至：'+phoen}} </text>
					<view class="flex-row justify-between items-center input section_3 mt-7-5">
						<view class="flex-col justify-start text-wrapper">
							<input v-if="otherphoen" v-model="phoen" type="number" maxlength="11" />
							<input v-else type="number" v-model="code" maxlength="6" />
							<text class="font text_4"> </text>
						</view>
						<text class="font text_3" v-if="!otherphoen" @click="loginphoense">重新发送
							{{remainingTime }}
						</text>
					</view>
				</view>
				<view class="flex-col self-stretch group_2">
					<view class="flex-col justify-start items-center button text-wrapper_2" @click="loginphoen"><text
							class="text_5">{{ otherphoen?'获取验证码':'登录'}}</text></view>
					<view class="flex-col justify-start items-center mt-23-5" @click="empower"><text
							class="text_6">使用授权登录</text></view>
				</view>
				<view style="height:30rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		dynamic,
		SmsVerifyCode
	} from '@/utils/user.js'

	export default {
		name: "my-login",
		data() {
			return {
				// 微信授权
				show: false,
				// 手机号授权
				shows: false,
				// 隐私政策
				grouptype: false,
				// 其他手机号登录
				otherphoen: false,
				// 手机号
				phoen: '',
				// 验证码
				code: '',

				// 微信code
				wxcode: "",

				remainingTime: 60,
				countingDown: false

			};
		},

		methods: {

			navgetse() {


				wx.navigateTo({
					url: '/pages/setup/setup'
				});

			},

			// 获取头像
			denglus(data) {
				var _this = this
				uni.getUserProfile({
					desc: "获取你的昵称、头像、用于展示",
					success: async (res) => {
						console.log(res);
						// // 将数据存储到本地缓存中
						uni.setStorageSync('rawData', res.rawData);
						// 触发自定义事件，并传递用户信息给父组件
						// _this.$emit('loginSuccess', 1);
						// 登录
						_this.logionsq(data)
					},
					fail: err => {
						console.log(err)


					}
				})

			},


			getUserPhone(e) {


				console.log(e, '获取手机号')

				var data = {
					loginType: 'wx',
					wx_code: this.wxcode,
					mobile_code: e.detail.code
				}

				// 触发自定义事件，并传递用户信息给父组件

				// 获取头像昵称
				this.logionsq(data)
			},


			login() {
				var _this = this


				uni.getUserProfile({
					desc: "获取你的昵称、头像、用于展示",
					success: async (res) => {

						console.log(res, 8888);
						// // 将数据存储到本地缓存中
						uni.setStorageSync('rawData', res.rawData);

					},
					fail: err => {


						_this.wxcode = '';

						console.log(err, 55555)
					}
				})

			

				wx.login({
					success: function(res) {
						if (res.code) {


							// 登录成功，获取到用户的登录凭证 code
							_this.wxcode = res.code;
					 
							console.log('res.code222', res.code)

						}
					},
					fail: function(err) {
						// 调用 wx.login() 失败
						console.error('调用 wx.login() 失败：', err);
					}
				});
			},


			logionsq(data) {
				dynamic(data).then(res => {
					console.log(res)

					if (res.data.code != 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})

					}


					if (res.data.code == 0) {

						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 2000
						})


						// // 将数据存储到本地缓存中
						uni.setStorageSync('LoginData', res.data.data);
						// const myData = uni.getStorageSync('LoginData');

						this.remainingTime = 60;
						this.countingDown = false;
						// 微信授权
						this.show = false;
						// 手机号授权
						this.shows = false;
						// 隐私政策
						this.grouptype = false;
						// 其他手机号登录
						this.otherphoen = false;

						this.phoen = '';
						// 验证码
						this.code = '';
						this.wxcode = "";

						// // 从本地缓存中读取之前存储的数据
						// const myData = uni.getStorageSync('LoginData');
						this.$emit('loginSuccess', 1);
					}
				}).catch(error => {
					console.error('dynamic 方法执行出错：', error);
				})
			},


			loginphoense() {
				if (this.countingDown) {
					uni.showToast({
						title: '请稍后重新发送',
						icon: 'none',
						duration: 2000
					})

				} else {
					console.log('重新发送')
				}

			},
			// 获取验证码
			postcode: function() {

				var data = {

					mobile: this.phoen,
					type: 'login'

				}
				SmsVerifyCode(data).then(res => {
					console.log(res)



				}).catch(error => {
					console.error('dynamic 方法执行出错：', error);
				})

			},

			// 手机号码倒计时
			startCountdown() {
				if (!this.countingDown) {
					this.countingDown = true;
					const countdownInterval = setInterval(() => {
						if (this.remainingTime > 0) {
							this.remainingTime--;
						} else {
							clearInterval(countdownInterval);
							this.countingDown = false;
						}
					}, 1000);
				}
			},

			// countingDown

			// 获取验证码 或者登录
			loginphoen() {
				var _this = this


				wx.login({
					success: function(res) {
						if (res.code) {
							// 登录成功，获取到用户的登录凭证 code
							_this.wxcode = res.code;
							console.log('res.code', res.code)
						
						}
					},
					fail: function(err) {
						// 调用 wx.login() 失败
						console.error('调用 wx.login() 失败：', err);
					}
				});
				if (this.otherphoen) {
					// 获取验证码
					const phoneNumber = this.phoen;
					const regex = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
					if (regex.test(phoneNumber)) {
						console.log("手机号码格式正确,请求验证码");
						this.otherphoen = false
						// 获取验证码方法
						this.postcode()
						// 倒计时方法
						this.startCountdown()


					} else {
						console.log("手机号码格式不正确");

						uni.showToast({
							title: '手机号码有误',
							icon: 'none',
							duration: 2000
						})
					}


				} else {
					// 手机号登录,手机号验证码

					console.log('登录', this.code, this.phoen)


					if (this.code.length != 6) {
						uni.showToast({
							title: '请输入正确验证码',
							icon: 'none',
							duration: 2000
						})
					} else {



						// loginType	是	string	登陆方式: mobile:手机号、wx:微信
						// mobile	否	string	登陆手机号,loginType为mobile时必传
						// code	否	string	短信验证码，loginType为mobile时必传
						// wx_code	否	string	微信小程序授权code，loginType为wx时必传
						// mobile_code	否	string	微信获取手机号 code，loginType为wx时必传

						var data = {
							loginType: 'mobile',
							mobile: this.phoen,
							code: this.code,
							wx_code: this.wxcode
						}

						// 获取头像昵称
						this.denglus(data)

					}




				}

			},





			// 其他手机号登录
			other() {
				this.otherphoen = true
				this.show = false
				this.shows = true
			},
			// 使用授权
			empower() {


				this.show = true
				this.shows = false

			},
			open() {

				this.show = true

			},

			close() {

				this.show = false

			},


			opens() {
				this.shows = true
			},

			closes() {

				this.shows = false
			},


			group() {

				this.grouptype = !this.grouptype
			}

		}
	}
</script>

<style lang="less">
	input {
		// border: 2px solid red;
		width: 130%;
	}

	.showss {

		// height: 32vh;
		.mt-7-5 {
			margin-top: 15rpx;
		}

		.mt-23-5 {
			margin-top: 47rpx;
		}

		.section_2 {
			padding: 58.04rpx 0 122.76rpx;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		.text {
			color: #000000;
			font-size: 34rpx;
			font-family: PingFang SC;
			line-height: 31.44rpx;
		}

		.group {
			margin-top: 54.98rpx;
			padding: 0 39rpx;
		}

		.text_2 {
			color: #666666;
			font-size: 20rpx;
			font-family: PingFang SC;
			line-height: 18.58rpx;
		}

		.input {
			align-self: stretch;
		}

		.section_3 {
			padding: 23rpx 17.14rpx 24rpx 20.76rpx;
			background-color: #f4f4f4;
			border-radius: 8rpx;
		}

		.text-wrapper {
			padding: 9.7rpx 0 9.56rpx;
			// border-right: solid 1rpx #2b8eff;
		}

		.font {
			font-size: 32rpx;
			font-family: PingFang SC;
		}

		.text_4 {
			color: #222222;
			line-height: 23.74rpx;
		}

		.text_3 {
			color: #2b8eff;
			line-height: 29.86rpx;
		}

		.group_2 {
			margin-top: 60rpx;
		}

		.button {
			margin-left: 39rpx;
			margin-right: 40rpx;
		}

		.text-wrapper_2 {
			padding: 28.52rpx 0 28.26rpx;
			background-color: #2b8eff;
			border-radius: 8rpx;
		}

		.text_5 {
			color: #ffffff;
			font-size: 36rpx;
			font-family: PingFang SC;
			line-height: 33.22rpx;
		}

		.text_6 {
			color: #2b8eff;
			font-size: 30rpx;
			font-family: PingFang SC;
			line-height: 28.08rpx;
		}

	}

	.show {

		.mt-13-5 {
			margin-top: 27rpx;
		}

		.ml-6-5 {
			margin-left: 13rpx;
		}

		.font_2 {
			font-size: 36rpx;
			font-family: PingFang SC;
			line-height: 33.22rpx;
		}

		.font_3 {
			font-size: 24rpx;
			font-family: PingFang SC;
		}

		.section_6 {
			padding-bottom: 56.7rpx;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		.group_8 {
			padding-top: 74rpx;
		}

		.image_12 {
			width: 320rpx;
			height: 252rpx;
		}

		.section_7 {
			padding: 44rpx 40rpx 14.14rpx;
			background-image: linear-gradient(180deg, #2b8eff33 0%, #2b8eff00 100%);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		.pos_2 {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
		}

		.image_11 {
			border-radius: 16rpx;
			width: 80rpx;
			height: 80rpx;
		}

		.text_8 {
			color: #222222;
			font-size: 40rpx;
			font-family: PingFang SC;
			line-height: 37.76rpx;
		}

		.text_9 {
			color: #000000;
			line-height: 23.58rpx;
		}

		.group_9 {
			margin-top: 4rpx;
			padding: 0 40rpx;
		}

		.group_10 {
			border-radius: 50%;
			width: 24rpx;
			height: 24rpx;
			border-left: solid 1rpx #999999;
			border-right: solid 1rpx #999999;
			border-top: solid 1rpx #999999;
			border-bottom: solid 1rpx #999999;
		}

		.group_100 {
			border-radius: 50%;
			width: 24rpx;
			height: 24rpx;
			border-left: solid 1rpx #999999;
			border-right: solid 1rpx #999999;
			border-top: solid 1rpx #999999;
			border-bottom: solid 1rpx #999999;
			background: #2b8eff;
		}




		.group_11 {
			line-height: 18.66rpx;
			height: 18.68rpx;
		}

		.font_5 {
			font-size: 20rpx;
			font-family: PingFang SC;
			line-height: 18.66rpx;
			color: #222222;
		}

		.text_10 {
			line-height: 18.64rpx;
		}

		.font_6 {
			font-size: 20rpx;
			font-family: PingFang SC;
			line-height: 18.66rpx;
			color: #2b8eff;
		}

		.text_11 {
			line-height: 18.56rpx;
		}

		.text_12 {
			line-height: 18rpx;
		}

		.button {
			align-self: stretch;
			margin: 34rpx 40rpx 0;
		}

		.text-wrapper {
			padding: 28.52rpx 0 28.26rpx;
			background-color: #2b8eff;
			border-radius: 8rpx;
		}

		.text_13 {
			color: #ffffff;
		}

		.text_14 {
			margin-top: 47.16rpx;
			color: #2b8eff;
			font-size: 30rpx;
			font-family: PingFang SC;
			line-height: 28.14rpx;
		}
	}
</style>